import Qt 4.7
import QtQuick 1.0
import QtMobility.systeminfo 1.1
// import com.nokia.symbian 1.0

import "js/plurker.js" as Plurker
// import "js/script.js" as Script
import "components"

Rectangle {
  id: root
//  width: 360
//  height: 640

//  property Menu menu
  property int httpstate
  property int currentPlurk
  property int refreshCnt

  LoginDialog {
    id: loginDialog
    x: 0
    y: 0
    anchors.centerIn: parent
    z: 100
    onLogin: {
            console.log("Plurker Login");
//      Plurker.login(loginDialog.username, loginDialog.password, '');
      Plurker.oauth();
      loginDialog.password = "";
    }
  }

  Rectangle {
    id: plurkView
    x: 0
    y: 0
    width: parent.width
    height: parent.height
    opacity: 1
    color: "#000000"

    Rectangle {
      id: plurkAll
      color: "#000000"
      width: parent.width
      height: parent.height
      ListView {
        opacity: 1
        id: plurkList
        model: plurkModel
        delegate: plurkDelegate
        anchors.fill: parent
        anchors.topMargin: statusBar.height
        anchors.bottomMargin: toolBar.height
      }
    }

    Rectangle {
      id: plurkDetail
      color: "#000000"
      x: parent.width
      width: parent.width
      height: parent.height
      ListView {
        opacity: 1
        id: plurkDetailList
        model: plurkDetailModel
        delegate: plurkDelegate
        anchors.fill: parent
        anchors.topMargin: statusBar.height
        anchors.bottomMargin: toolBar.height
      }
    }

    states: [
      State {
        name: "hidden"
        PropertyChanges {
          target: plurkAll
          x: 0 - plurkAll.width
        }
        PropertyChanges {
          target: plurkDetail
          x: 0
        }
      },
      State {
        name: "visible"
        PropertyChanges {
          target: plurkAll
          x: 0
        }
        PropertyChanges {
          target: plurkDetail
          x: plurkDetail.width
        }
      }
    ]
    transitions: Transition {
      SequentialAnimation {
        ParallelAnimation {
          NumberAnimation { target: plurkAll; property: "x"; duration: 600; easing.type: "InOutCubic" }
          NumberAnimation { target: plurkDetail; property: "x"; duration: 600; easing.type: "InOutCubic" }
        }
      }
    }
  }
/*
  StatusBar {
    id: statusBar
    anchors.top: plurkView.top
  }

  ToolBar {
    id: toolBar
    anchors.bottom: root.bottom
    tools: ToolBarLayout {
      ToolButton {
        flat: true
        iconSource: "qrc:tb_quit.svg"
        onClicked: {
            Qt.quit();
        }
      }
      ToolButton {
        iconSource: "qrc:tb_home.svg"
        onClicked: {
          if (httpstate == 3) {
            refreshTimer.start();
            httpstate = 1;
            plurkModel.clear();
            Plurker.poll(plurkModel, 20, '');
          }
          httpstate = 1;
          plurkView.state = "visible";
        }
      }
      ToolButton {
        iconSource: "qrc:tb_unread.svg"
        onClicked: {
          if (httpstate == 1 || httpstate == 0) {
            refreshTimer.start();
            httpstate = 3;
            plurkModel.clear();
            Plurker.poll_unread(plurkModel, 20, '');
          } else if (httpstate == 2) {
            refreshTimer.start();
            httpstate = 3;
            plurkModel.clear();
            Plurker.poll_unread(plurkModel, 20, '');
          }
          httpstate = 3;
          plurkView.state = "visible";
        }
      }
      ToolButton {
        iconSource: "qrc:tb_newmsg.svg"
        onClicked: {
        }
      }
      ToolButton {
        id: tb_refresh
        iconSource: "qrc:tb_refresh.svg"
        onClicked: {
          if (httpstate == 0)
            Plurker.poll(plurkModel, 20, '');
          else if (httpstate == 2)
            Plurker.response(plurkDetailModel, currentPlurk, 0, '');
          else if (httpstate == 3)
            Plurker.poll_unread(plurkModel, 20, '');
          refreshTimer.start();
        }
      }
    }
  }
*/
  Timer {
    id: refreshTimer
    interval: 50
    repeat: true
    running: false
    triggeredOnStart: false
    onTriggered: {
//      tb_refresh.iconSource = "qrc:tb_refresh"+refreshCnt+".svg";
      refreshCnt++;
      if (refreshCnt == 9) refreshCnt = 0;
    }
  }

  Component {
    id: plurkDelegate
    Item {
      id: plurkitem
      opacity: 1
      width: parent.width
      height: plurk_text.height > plurk_avatar.height ? plurk_text.height + plurker.height + 20 : plurk_avatar.height + plurker.height + 20
      Rectangle {
        smooth: true
        color: "#999999"
        width: parent.width
        height: parent.height
        Rectangle {
          smooth: true
          color: plurkMouseArea.pressed ? "#aaaaaa" : "#000000"
          width: parent.width
          height: parent.height - 1
          Image {
            id: plurk_avatar
            x: parent.x
            y: parent.y + 4
            source: avatar
            width: 48
            height: 48
          }
          Text {
            id: plurk_text
            x: parent.x + plurk_avatar.width + 5
            y: parent.y + 4
            width: parent.width - plurk_avatar.width - 5
            color: "#ffffff"
            text: "<span>" + plurk_data +"</span>"
            wrapMode: Text.WordWrap
          }
          Rectangle {
            id: plurk_info
            x: parent.x + plurk_avatar.width + 5
            y: plurkitem.height - plurker.height - 5
            Text {
              id: plurker
              color: "#ffffff"
              text: "<span>" + plurk_name + "</span>"
            }
            Text {
              id: plurk_response
              width: plurkitem.width - plurk_avatar.width - 9
              color: is_unread == 1 ? "#ff0000" : "#ffffff"
              horizontalAlignment: Text.AlignRight
              text: "<span> Response: " + response + "</span>"
            }
          }
          Rectangle {
            id: plurk_state
            y: plurkitem.height - private_image.height - 5
            Image {
              id: private_image
              source: "qrc:locking.png"
              visible: plurk_private != null
            }
          }
        }
      }
      MouseArea {
        id: plurkMouseArea
        anchors.fill: parent
        onClicked: {
          currentPlurk = plurk_id;
          console.log("Mouse Area " + plurk_id + " " + plurkModel.get(index));
          httpstate = 2;
          plurkDetailModel.clear();
          plurkDetailModel.append(plurkModel.get(index));
          Plurker.response(plurkDetailModel, plurk_id, 0, '');
          plurkView.state = "hidden"
        }
      }
    }
  }

  ListModel {
    id: plurkDetailModel
  }

  ListModel {
    id: plurkModel
  }

  Component.onCompleted: {
    loginDialog.state = "shown";
    // Script.setPlurkCB(plurkDownload);
    // Script.setModel(plurkModel);
    // Script.download();
//    Plurker.login("hilary_cheng", "1234569", plurkLogin);
    refreshCnt = 1;
    refreshTimer.start();
    httpstate = 0;
    Plurker.poll(plurkModel, 20, '');
//     ajaxHttp.get("http://www.google.com.hk");
  }

  Connections {
    target: ajax
    onSuccess: {
            console.log(value);
      if (httpstate == 0 && status == 200) {
        var result = eval('(' + value + ')');
        var users = result.plurk_users;
        var plurk = result.plurks;
        plurkModel.clear();
        Plurker.handlePlurk(plurkModel, users, plurk, 0);
        refreshTimer.stop();
      } else if (httpstate == 1 && status == 200) {
        refreshTimer.start();
        httpstate = 0;
        Plurker.poll(plurkModel, 20, '');
      } else if (httpstate == 2 && status == 200) {
        var result = eval('(' + value + ')');
        var users = result.friends;
        var plurk = result.responses;
        Plurker.handlePlurk(plurkDetailModel, users, plurk, 1);
        refreshTimer.stop();
      } else if (httpstate == 3 && status == 200) {
        var result = eval('(' + value + ')');
        var users = result.plurk_users;
        var plurk = result.plurks;
        plurkModel.clear();
        Plurker.handlePlurk(plurkModel, users, plurk, 0);
        refreshTimer.stop();
      } else {
        refreshTimer.stop();
        httpstate = 1;
        loginDialog.visible = true;
      }
    }
    onError: {
        loginDialog.visible = true;
    }
  }

/*
  Component {
    id: menuComponent
    Menu {
      content: MenuLayout {
        MenuItem {
          text: "Refresh";
          onClicked: {
            if (httpstate == 0)
              Plurker.poll(plurkModel, 20, '');
            else if (httpstate == 2)
              Plurker.response(plurkDetailModel, currentPlurk, 0, '');
            else if (httpstate == 3)
              Plurker.poll_unread(plurkModel, 20, '');
          }
        }
        MenuItem {
          text: "Logout";
        }
        MenuItem {
          text: "About Me";
        }
        MenuItem {
          text: "Quit";
          onClicked: Qt.quit()
        }
      }
    }
  }
    */

}
